import React from 'react'
import {Form,Input,Checkbox,Button} from "antd"
export default function AntdForm() {

    // 2. 获取 useForm() // 返回值为一个数组
    let [form] = Form.useForm();

    let finish = ()=>{
        // 4. 可以借助 form  获取数据
        let obj = form.getFieldsValue();
        console.log(obj);
    }



    return (
        <Form
            //3. 为form 表单绑定 form 
            form={form}
            labelCol={{ span: 3 }}
            wrapperCol={{ span: 5 }}
            initialValues={{ remember: false}}
            // 1.  绑定 onfishi事件
            onFinish={finish}
            
        >
            <Form.Item
                label="账号"
                name="username"
                rules={[{ required: true, message: '请输入账号!' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: '请输入密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item name="remember" valuePropName="checked" 
            wrapperCol={{ offset: 3, span: 16 }}>
                <Checkbox>记住我!</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 3, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    登录
                </Button>
            </Form.Item>
        </Form>
    )
}
